<template>
  <a-form-model-item :prop="required ? prop : ''">
    <!-- 预览模式描述 -->
    <span v-if="options.pattern == 2 && options.disabled == true">
      {{ options.explain }}
    </span>
    <a-checkbox-group
      v-else-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)"
      :style="`width: ${options.width}; word-wrap:break-word;`"
      v-model="myValue"
      @change="helpChange"
      :disabled="options.disabled"
      :vertical="options.vertical"
    >
      <!-- 换行渲染 -->
      <div v-if="options.vertical">
        <a-row v-for="(item, index) in options.options" :key="index">
          <a-checkbox :value="item.value" :name="item.label">{{ item.label }}</a-checkbox>
        </a-row>
      </div>
      <!-- 不换行渲染 -->
      <div v-else>
        <a-checkbox v-for="item in options.options" :key="item.value" :value="String(item.value)" :name="item.label">{{
          item.label
        }}</a-checkbox>
      </div>
    </a-checkbox-group>
    <div
      v-else
      :class="{ formMaringBox: true, beyond_hiding: index == undefined ? false : true }"
      :style="`width: ${options.width}; word-wrap:break-word;`"
    >
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>{{ getValue() }}</span>
        </template>
        <span
          class="copy_text"
          @click="copyClick()"
          @mouseenter="
            () => {
              isCopy = true
            }
          "
          @mouseleave="
            () => {
              isCopy = false
            }
          "
          >  {{ getValue() }}
        </span>
      </a-tooltip>
    </div>
  </a-form-model-item>
</template>

<script>
import { copyValue } from '@/utils/formassembly/util.js'
export default {
  props: {
    required: {
      type: Boolean,
      default: true,
    },
    label: {
      type: String,
    },
    span: {
      type: Number,
      default: 19,
    },
    prop: {
      type: String,
    },
    type: {
      type: String,
      default: 'table',
    },
    // 子表单用到
    index: {
      type: Number,
    },
    // change事件属性
    change: {
      type: String,
    },
    // click事件属性
    click: {
      type: String,
    },
    value: {},
    // 属性配置参数
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    // 布局配置参数
    config: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  watch: {
    value(val) {
      this.myValue = val ? val.split(',') : undefined
    },
  },
  data() {
    return {
      myValue: this.value ? String(this.value).split(',') : [],
      isCopy: false, // 复制标签显示
    }
  },
  created() {
    this.myValue = this.value ? this.value.split(',') : []
    // 如果开启了动态数据, 查枚举项渲染
    if (this.options.dynamic && this.options.dynamicKey) {
      this.getEnumList(this.options.dynamicKey)
    }
  },
  methods: {
    // 鼠标点击复制内容
    copyClick() {
      if (copyValue(this.getValue())) {
        this.$message.success('复制成功')
      } else {
        this.$message.error('复制失败')
      }
    },
    // 默认值回显方法
    getValue() {
      let arr = []
      this.options.options.forEach((v) => {
        if (this.myValue.includes(v.value)) {
          arr.push(v.label)
        }
      })
      // console.log('arr', arr)
      return arr.join('，')
    },
    // 查询枚举对象
    async getEnumList(enumKey) {
      this.options.options = []
      await this.$store.getters.getEnumItem(this.options.dynamicKey).forEach((v) => {
        this.options.options.push({
          value: String(v.value),
          label: v.label,
        })
      })
    },
    helpChange() {
      this.$listeners.updatedValueF(this.prop, this.myValue.join(','), this.index)
      if (this.change) {
        this.$listeners.fHelp(this.change, this.index)
      }
    },
    helpClick() {
      if (this.click) {
        this.$listeners.fHelp(this.click, this.index)
      }
    },
  },
}
</script>

